ഫ്രണ്ടെൻഡ് മീഡിയസ്ട്രീം റെക്കോർഡിംഗ്: ബ്രൗസർ അധിഷ്ഠിത മീഡിയ ക്യാപ്‌ചർ

ഒരു വെബ് ബ്രൗസറിനുള്ളിൽ നേരിട്ട് ഓഡിയോയും വീഡിയോയും റെക്കോർഡ് ചെയ്യാനുള്ള കഴിവ് വെബ് ആപ്ലിക്കേഷൻ വികസനത്തിൽ വിപ്ലവം സൃഷ്ടിച്ചു. MediaRecorder എപിഐ ഉപയോഗിക്കുന്ന ഫ്രണ്ടെൻഡ് മീഡിയസ്ട്രീം റെക്കോർഡിംഗ്, സങ്കീർണ്ണമായ സെർവർ സൈഡ് പ്രോസസ്സിംഗിനെ ആശ്രയിക്കാതെ ഈ പ്രവർത്തനം നടപ്പിലാക്കുന്നതിനുള്ള ശക്തവും കാര്യക്ഷമവുമായ ഒരു മാർഗ്ഗം നൽകുന്നു. ഈ സമീപനം തത്സമയ ഇടപെടൽ, കുറഞ്ഞ ലേറ്റൻസി, മെച്ചപ്പെട്ട ഉപയോക്തൃ അനുഭവങ്ങൾ എന്നിവ അനുവദിക്കുന്നു, പ്രത്യേകിച്ച് ഓൺലൈൻ മീറ്റിംഗുകൾ, വീഡിയോ എഡിറ്റിംഗ് ടൂളുകൾ, ഇൻ്ററാക്ടീവ് ട്യൂട്ടോറിയലുകൾ പോലുള്ള ആപ്ലിക്കേഷനുകളിൽ.

മീഡിയസ്ട്രീം എപിഐ മനസ്സിലാക്കാം

ബ്രൗസർ അധിഷ്ഠിത മീഡിയ ക്യാപ്‌ചറിന്റെ ഹൃദയഭാഗത്ത് MediaStream എപിഐ ആണ്. ഒരു MediaStream എന്നത് ഓഡിയോ അല്ലെങ്കിൽ വീഡിയോ ട്രാക്കുകൾ പോലുള്ള മീഡിയ ഡാറ്റയുടെ ഒരു സ്ട്രീമിനെ പ്രതിനിധീകരിക്കുന്നു. ഒരു MediaStream ആക്‌സസ് ചെയ്യുന്നതിന്, നിങ്ങൾ സാധാരണയായി getUserMedia() മെത്തേഡ് ഉപയോഗിക്കുന്നു.

getUserMedia() മെത്തേഡ് ഉപയോക്താവിൻ്റെ മൈക്രോഫോണും/അല്ലെങ്കിൽ ക്യാമറയും ആക്‌സസ് ചെയ്യാനുള്ള അനുമതി ആവശ്യപ്പെടുന്നു. ഉപയോക്താവ് അനുമതി നൽകുകയാണെങ്കിൽ അത് ഒരു MediaStream ഒബ്ജക്റ്റുമായി റിസോൾവ് ആകുന്ന ഒരു Promise നൽകുന്നു, അല്ലെങ്കിൽ ഉപയോക്താവ് അനുമതി നിഷേധിക്കുകയോ ആക്സസ് ലഭ്യമല്ലാതിരിക്കുകയോ ചെയ്താൽ ഒരു പിശകോടെ റിജെക്ട് ചെയ്യുന്നു.

ഉദാഹരണം: ക്യാമറ ആക്സസ് അഭ്യർത്ഥിക്കുന്നു

ഉപയോക്താവിൻ്റെ ക്യാമറയിലേക്ക് ആക്‌സസ് അഭ്യർത്ഥിക്കുന്നതിനുള്ള ഒരു അടിസ്ഥാന ഉദാഹരണം ഇതാ:

            
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
  .then(function(stream) {
    // Stream is available, do something with it
    console.log("Camera access granted!");
  })
  .catch(function(error) {
    console.error("Error accessing camera: ", error);
  });

            

              
                Copy
              
            
          

വിശദീകരണം:

• navigator.mediaDevices.getUserMedia({ video: true, audio: false }): ഈ ലൈൻ ക്യാമറയിലേക്കുള്ള ആക്‌സസ് അഭ്യർത്ഥിക്കുന്നു (video: true) കൂടാതെ ഓഡിയോ വ്യക്തമായി പ്രവർത്തനരഹിതമാക്കുകയും ചെയ്യുന്നു (audio: false). ഓഡിയോയും വീഡിയോയും അല്ലെങ്കിൽ ഓഡിയോ മാത്രം അഭ്യർത്ഥിക്കാൻ നിങ്ങൾക്ക് ഈ ഓപ്ഷനുകൾ ക്രമീകരിക്കാവുന്നതാണ്.
• .then(function(stream) { ... }): ഉപയോക്താവ് അനുമതി നൽകിയാൽ ഈ ബ്ലോക്ക് പ്രവർത്തിക്കുന്നു. stream വേരിയബിളിൽ MediaStream ഒബ്ജക്റ്റ് അടങ്ങിയിരിക്കുന്നു.
• .catch(function(error) { ... }): ഉപയോക്താവ് അനുമതി നിഷേധിക്കുന്നത് പോലുള്ള ഒരു പിശക് ഉണ്ടായാൽ ഈ ബ്ലോക്ക് പ്രവർത്തിക്കുന്നു. ഒരു നല്ല ഉപയോക്തൃ അനുഭവം നൽകുന്നതിന് പിശകുകൾ ഭംഗിയായി കൈകാര്യം ചെയ്യേണ്ടത് അത്യാവശ്യമാണ്.

getUserMedia()-നുള്ള കോൺഫിഗറേഷൻ ഓപ്ഷനുകൾ

getUserMedia() മെത്തേഡ് ഒരു ഓപ്ഷണൽ കൺസ്ട്രെയിൻ്റ്സ് ഒബ്ജക്റ്റ് സ്വീകരിക്കുന്നു, ഇത് മീഡിയ സ്ട്രീമിൻ്റെ ആവശ്യമുള്ള സ്വഭാവസവിശേഷതകൾ വ്യക്തമാക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. ഇതിൽ താഴെ പറയുന്ന ഓപ്ഷനുകൾ ഉൾപ്പെടുന്നു:

• video: വീഡിയോ അഭ്യർത്ഥിക്കുന്നതിനുള്ള ബൂളിയൻ (true/false), അല്ലെങ്കിൽ കൂടുതൽ നിർദ്ദിഷ്ട വീഡിയോ കൺസ്ട്രെയിൻ്റ്സിനുള്ള (ഉദാ. റെസലൂഷൻ, ഫ്രെയിം റേറ്റ്) ഒരു ഒബ്ജക്റ്റ്.
• audio: ഓഡിയോ അഭ്യർത്ഥിക്കുന്നതിനുള്ള ബൂളിയൻ (true/false), അല്ലെങ്കിൽ കൂടുതൽ നിർദ്ദിഷ്ട ഓഡിയോ കൺസ്ട്രെയിൻ്റ്സിനുള്ള (ഉദാ. എക്കോ കാൻസലേഷൻ, നോയിസ് സപ്രഷൻ) ഒരു ഒബ്ജക്റ്റ്.
• width: വീഡിയോ സ്ട്രീമിൻ്റെ ആവശ്യമുള്ള വീതി.
• height: വീഡിയോ സ്ട്രീമിൻ്റെ ആവശ്യമുള്ള ഉയരം.
• frameRate: വീഡിയോ സ്ട്രീമിൻ്റെ ആവശ്യമുള്ള ഫ്രെയിം റേറ്റ്.

ഉദാഹരണം: നിർദ്ദിഷ്ട ക്യാമറ റെസലൂഷൻ അഭ്യർത്ഥിക്കുന്നു

            
navigator.mediaDevices.getUserMedia({
  video: {
    width: { min: 640, ideal: 1280, max: 1920 },
    height: { min: 480, ideal: 720, max: 1080 }
  },
  audio: true
})
.then(function(stream) {
  // Stream is available
})
.catch(function(error) {
  // Handle errors
});

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, 640-നും 1920-നും ഇടയിൽ വീതിയുള്ള (അനുയോജ്യമായി 1280) 480-നും 1080-നും ഇടയിൽ ഉയരമുള്ള (അനുയോജ്യമായി 720) ഒരു വീഡിയോ സ്ട്രീം ഞങ്ങൾ അഭ്യർത്ഥിക്കുന്നു. ഞങ്ങൾ ഓഡിയോയും അഭ്യർത്ഥിക്കുന്നുണ്ട്.

മീഡിയറെക്കോർഡർ എപിഐ പരിചയപ്പെടുത്തുന്നു

നിങ്ങൾക്ക് ഒരു MediaStream ലഭിച്ചുകഴിഞ്ഞാൽ, മീഡിയ ഡാറ്റ റെക്കോർഡ് ചെയ്യുന്നതിന് നിങ്ങൾക്ക് MediaRecorder എപിഐ ഉപയോഗിക്കാം. MediaRecorder എപിഐ റെക്കോർഡിംഗ് ആരംഭിക്കുന്നതിനും നിർത്തുന്നതിനും താൽക്കാലികമായി നിർത്തുന്നതിനും പുനരാരംഭിക്കുന്നതിനും അതുപോലെ റെക്കോർഡ് ചെയ്ത ഡാറ്റ ആക്‌സസ് ചെയ്യുന്നതിനുമുള്ള മെത്തേഡുകൾ നൽകുന്നു.

ഒരു മീഡിയറെക്കോർഡർ ഇൻസ്റ്റൻസ് ഉണ്ടാക്കുന്നു

ഒരു MediaRecorder ഇൻസ്റ്റൻസ് ഉണ്ടാക്കാൻ, നിങ്ങൾ MediaRecorder കൺസ്ട്രക്റ്ററിലേക്ക് MediaStream ഒബ്ജക്റ്റ് പാസ് ചെയ്യുക:

            
const mediaRecorder = new MediaRecorder(stream);

            

              
                Copy
              
            
          

കൺസ്ട്രക്റ്ററിൽ നിങ്ങൾക്ക് അധിക ഓപ്ഷനുകളും വ്യക്തമാക്കാം, ഉദാഹരണത്തിന് റെക്കോർഡ് ചെയ്ത ഡാറ്റയ്ക്കുള്ള MIME തരം:

            
const options = { mimeType: 'video/webm;codecs=vp9' };
const mediaRecorder = new MediaRecorder(stream, options);

            

              
                Copy
              
            
          

പിന്തുണയ്ക്കുന്ന MIME തരങ്ങൾ:

ലഭ്യമായ MIME തരങ്ങൾ ബ്രൗസറിനെയും അത് പിന്തുണയ്ക്കുന്ന കോഡെക്കുകളെയും ആശ്രയിച്ചിരിക്കുന്നു. സാധാരണ MIME തരങ്ങളിൽ ഇവ ഉൾപ്പെടുന്നു:

• video/webm;codecs=vp9
• video/webm;codecs=vp8
• video/mp4;codecs=avc1
• audio/webm;codecs=opus
• audio/ogg;codecs=vorbis

ഒരു പ്രത്യേക MIME തരം ബ്രൗസർ പിന്തുണയ്ക്കുന്നുണ്ടോ എന്ന് പരിശോധിക്കാൻ നിങ്ങൾക്ക് MediaRecorder.isTypeSupported() മെത്തേഡ് ഉപയോഗിക്കാം:

            
if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9')) {
  console.log('video/webm;codecs=vp9 is supported');
} else {
  console.log('video/webm;codecs=vp9 is not supported');
}

            

              
                Copy
              
            
          

മീഡിയറെക്കോർഡർ ഉപയോഗിച്ച് ഡാറ്റ റെക്കോർഡ് ചെയ്യുന്നു

റെക്കോർഡിംഗ് പ്രക്രിയ നിരീക്ഷിക്കാൻ നിങ്ങൾക്ക് ശ്രദ്ധിക്കാൻ കഴിയുന്ന നിരവധി ഇവൻ്റുകൾ MediaRecorder എപിഐ നൽകുന്നു:

• dataavailable: ഡാറ്റ സേവ് ചെയ്യാൻ ലഭ്യമാകുമ്പോഴെല്ലാം ഈ ഇവൻ്റ് ഫയർ ചെയ്യപ്പെടുന്നു.
• start: റെക്കോർഡിംഗ് ആരംഭിക്കുമ്പോൾ ഈ ഇവൻ്റ് ഫയർ ചെയ്യപ്പെടുന്നു.
• stop: റെക്കോർഡിംഗ് നിർത്തുമ്പോൾ ഈ ഇവൻ്റ് ഫയർ ചെയ്യപ്പെടുന്നു.
• pause: റെക്കോർഡിംഗ് താൽക്കാലികമായി നിർത്തുമ്പോൾ ഈ ഇവൻ്റ് ഫയർ ചെയ്യപ്പെടുന്നു.
• resume: റെക്കോർഡിംഗ് പുനരാരംഭിക്കുമ്പോൾ ഈ ഇവൻ്റ് ഫയർ ചെയ്യപ്പെടുന്നു.
• error: റെക്കോർഡിംഗിനിടെ ഒരു പിശക് സംഭവിച്ചാൽ ഈ ഇവൻ്റ് ഫയർ ചെയ്യപ്പെടുന്നു.

ഏറ്റവും പ്രധാനപ്പെട്ട ഇവൻ്റ് dataavailable ആണ്. ഈ ഇവൻ്റ് റെക്കോർഡ് ചെയ്ത ഡാറ്റ അടങ്ങുന്ന ഒരു Blob ഒബ്ജക്റ്റ് നൽകുന്നു. നിങ്ങൾക്ക് ഈ Blob ഒബ്ജക്റ്റുകൾ ശേഖരിക്കുകയും റെക്കോർഡിംഗ് പൂർത്തിയാകുമ്പോൾ അവയെ ഒരൊറ്റ Blob ആയി സംയോജിപ്പിക്കുകയും ചെയ്യാം.

ഉദാഹരണം: വീഡിയോ റെക്കോർഡ് ചെയ്യുകയും സേവ് ചെയ്യുകയും ചെയ്യുന്നു

            
let recordedChunks = [];

mediaRecorder.ondataavailable = function(event) {
  console.log('data-available: ', event.data.size);
  if (event.data.size > 0) {
    recordedChunks.push(event.data);
  }
};

mediaRecorder.onstop = function() {
  console.log('Recording stopped!');
  const blob = new Blob(recordedChunks, { type: 'video/webm' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.style.display = 'none';
  a.href = url;
  a.download = 'recorded-video.webm';
  document.body.appendChild(a);
  a.click();
  setTimeout(() => {
    URL.revokeObjectURL(url);
    document.body.removeChild(a);
  }, 100);
};

mediaRecorder.start();
console.log("Recording started!");

// To stop recording:
// mediaRecorder.stop();

            

              
                Copy
              
            
          

വിശദീകരണം:

• let recordedChunks = [];: റെക്കോർഡ് ചെയ്ത ഡാറ്റയുടെ ഭാഗങ്ങൾ സംഭരിക്കുന്നതിനുള്ള ഒരു അറേ.
• mediaRecorder.ondataavailable = function(event) { ... }: പുതിയ ഡാറ്റ ലഭ്യമാകുമ്പോഴെല്ലാം ഈ ഫംഗ്ഷൻ വിളിക്കപ്പെടുന്നു. ഇത് ഡാറ്റയെ recordedChunks അറേയിലേക്ക് ചേർക്കുന്നു.
• mediaRecorder.onstop = function() { ... }: റെക്കോർഡിംഗ് നിർത്തുമ്പോൾ ഈ ഫംഗ്ഷൻ വിളിക്കപ്പെടുന്നു. ഇത് ശേഖരിച്ച ഭാഗങ്ങളിൽ നിന്ന് ഒരു Blob ഉണ്ടാക്കുകയും, Blob-നായി ഒരു URL ജനറേറ്റ് ചെയ്യുകയും, ഒരു ഡൗൺലോഡ് ലിങ്ക് ഉണ്ടാക്കുകയും ഡൗൺലോഡ് പ്രവർത്തനക്ഷമമാക്കുകയും ചെയ്യുന്നു. ചെറിയൊരു ഇടവേളയ്ക്ക് ശേഷം ഇത് ഉണ്ടാക്കിയ URL ഒബ്ജക്റ്റ് നീക്കം ചെയ്യുകയും ചെയ്യുന്നു.
• mediaRecorder.start();: ഇത് റെക്കോർഡിംഗ് പ്രക്രിയ ആരംഭിക്കുന്നു.
• mediaRecorder.stop();: റെക്കോർഡിംഗ് നിർത്താൻ ഇത് വിളിക്കുക.

റെക്കോർഡിംഗ് പ്രക്രിയ നിയന്ത്രിക്കുന്നു

റെക്കോർഡിംഗ് പ്രക്രിയ നിയന്ത്രിക്കുന്നതിനുള്ള മെത്തേഡുകൾ MediaRecorder എപിഐ നൽകുന്നു:

• start(timeslice): റെക്കോർഡിംഗ് ആരംഭിക്കുന്നു. ഓപ്ഷണൽ timeslice ആർഗ്യുമെൻ്റ്, dataavailable ഇവൻ്റ് ഫയർ ചെയ്യേണ്ട ഇടവേള (മില്ലിസെക്കൻഡിൽ) വ്യക്തമാക്കുന്നു. timeslice നൽകിയിട്ടില്ലെങ്കിൽ, റെക്കോർഡിംഗ് നിർത്തുമ്പോൾ മാത്രമേ dataavailable ഇവൻ്റ് ഫയർ ചെയ്യപ്പെടുകയുള്ളൂ.
• stop(): റെക്കോർഡിംഗ് നിർത്തുന്നു.
• pause(): റെക്കോർഡിംഗ് താൽക്കാലികമായി നിർത്തുന്നു.
• resume(): റെക്കോർഡിംഗ് പുനരാരംഭിക്കുന്നു.
• requestData(): dataavailable ഇവൻ്റ് സ്വമേധയാ പ്രവർത്തനക്ഷമമാക്കുന്നു.

ബ്രൗസർ അനുയോജ്യതയും പോളിഫില്ലുകളും

MediaStream, MediaRecorder എപിഐ-കൾ ആധുനിക ബ്രൗസറുകളിൽ വ്യാപകമായി പിന്തുണയ്ക്കുന്നു. എന്നിരുന്നാലും, പഴയ ബ്രൗസറുകൾ ഈ എപിഐ-കളെ സ്വാഭാവികമായി പിന്തുണച്ചേക്കില്ല. നിങ്ങൾക്ക് പഴയ ബ്രൗസറുകളെ പിന്തുണയ്‌ക്കേണ്ടതുണ്ടെങ്കിൽ, ആവശ്യമായ പ്രവർത്തനം നൽകുന്നതിന് നിങ്ങൾക്ക് പോളിഫില്ലുകൾ ഉപയോഗിക്കാം.

നിരവധി പോളിഫില്ലുകൾ ലഭ്യമാണ്, അവയിൽ ഉൾപ്പെടുന്നവ:

• adapter.js: ഈ പോളിഫിൽ getUserMedia() ഉൾപ്പെടെയുള്ള വെബ്ആർടിസി എപിഐ-കൾക്കായി ക്രോസ്-ബ്രൗസർ അനുയോജ്യത നൽകുന്നു.
• recorderjs: സ്വാഭാവികമായി പിന്തുണയ്ക്കാത്ത ബ്രൗസറുകൾക്കായി MediaRecorder പ്രവർത്തനം നൽകുന്ന ഒരു ജാവാസ്ക്രിപ്റ്റ് ലൈബ്രറി.

പ്രായോഗിക പ്രയോഗങ്ങളും ഉപയോഗങ്ങളും

ഫ്രണ്ടെൻഡ് മീഡിയസ്ട്രീം റെക്കോർഡിംഗ് വെബ് ആപ്ലിക്കേഷൻ വികസനത്തിന് വിപുലമായ സാധ്യതകൾ തുറക്കുന്നു. ചില പ്രായോഗിക പ്രയോഗങ്ങളും ഉപയോഗങ്ങളും ഇതാ:

• ഓൺലൈൻ മീറ്റിംഗുകളും വീഡിയോ കോൺഫറൻസിംഗും: ഓൺലൈൻ മീറ്റിംഗുകൾക്കും വീഡിയോ കോൺഫറൻസുകൾക്കുമായി ഓഡിയോയും വീഡിയോയും തത്സമയം റെക്കോർഡ് ചെയ്യുകയും കൈമാറുകയും ചെയ്യുക.
• വീഡിയോ എഡിറ്റിംഗ് ടൂളുകൾ: ഉപയോക്താക്കളെ ബ്രൗസറിൽ നേരിട്ട് വീഡിയോ ഉള്ളടക്കം റെക്കോർഡ് ചെയ്യാനും എഡിറ്റ് ചെയ്യാനും അനുവദിക്കുക.
• ഇൻ്ററാക്ടീവ് ട്യൂട്ടോറിയലുകളും ഡെമോൺസ്ട്രേഷനുകളും: ഉപയോക്തൃ ഇടപെടലുകൾ റെക്കോർഡ് ചെയ്യുകയും വ്യക്തിഗത ഫീഡ്‌ബാക്ക് നൽകുകയും ചെയ്യുന്ന ഇൻ്ററാക്ടീവ് ട്യൂട്ടോറിയലുകളും ഡെമോൺസ്ട്രേഷനുകളും ഉണ്ടാക്കുക.
• വോയിസ് റെക്കോർഡിംഗ് ആപ്ലിക്കേഷനുകൾ: കുറിപ്പുകൾ എടുക്കുന്നതിനും വോയിസ് മെമ്മോകൾക്കും ഓഡിയോ എഡിറ്റിംഗിനുമായി വോയിസ് റെക്കോർഡിംഗ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുക.
• നിരീക്ഷണ സംവിധാനങ്ങളും സുരക്ഷാ ക്യാമറകളും: വീഡിയോ സ്ട്രീമുകൾ റെക്കോർഡ് ചെയ്യുന്ന ബ്രൗസർ അധിഷ്ഠിത നിരീക്ഷണ സംവിധാനങ്ങളും സുരക്ഷാ ക്യാമറകളും നടപ്പിലാക്കുക.
• പ്രവേശനക്ഷമതാ ടൂളുകൾ: സംഭാഷണം റെക്കോർഡ് ചെയ്ത് തത്സമയം ടെക്സ്റ്റാക്കി മാറ്റുന്ന ടൂളുകൾ വികസിപ്പിക്കുക, അല്ലെങ്കിൽ പിന്നീട് അവലോകനം ചെയ്യുന്നതിനായി സ്ക്രീൻ പ്രവർത്തനം റെക്കോർഡ് ചെയ്യുക.

ഉദാഹരണം: ഒരു ലളിതമായ വീഡിയോ റെക്കോർഡിംഗ് ആപ്ലിക്കേഷൻ നടപ്പിലാക്കുന്നു

HTML, CSS, JavaScript എന്നിവ ഉപയോഗിച്ച് ചർച്ച ചെയ്ത ആശയങ്ങളെ ഒരു അടിസ്ഥാന വീഡിയോ റെക്കോർഡിംഗ് ആപ്ലിക്കേഷനിലേക്ക് എങ്ങനെ സംയോജിപ്പിക്കാമെന്നതിൻ്റെ ലളിതമായ ഒരു ഉദാഹരണം ഇതാ:

HTML (index.html):

            



  
  


  
Browser Video Recorder
  

  Record
  Stop
  



            

              
                Copy
              
            
          

CSS (style.css):

            
body {
  font-family: sans-serif;
  text-align: center;
}

video {
  width: 640px;
  height: 480px;
  border: 1px solid #ccc;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  margin: 10px;
}

            

              
                Copy
              
            
          

JavaScript (script.js):

            
const preview = document.getElementById('preview');
const recordButton = document.getElementById('recordButton');
const stopButton = document.getElementById('stopButton');

let mediaRecorder;
let recordedChunks = [];

recordButton.addEventListener('click', startRecording);
stopButton.addEventListener('click', stopRecording);

async function startRecording() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
    preview.srcObject = stream;

    mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.ondataavailable = handleDataAvailable;
    mediaRecorder.onstop = handleStop;

    mediaRecorder.start();

    recordButton.disabled = true;
    stopButton.disabled = false;

  } catch (err) {
    console.error("Error accessing media devices.", err);
  }
}

function handleDataAvailable(event) {
  if (event.data.size > 0) {
    recordedChunks.push(event.data);
  }
}

function stopRecording() {
  mediaRecorder.stop();

  recordButton.disabled = false;
  stopButton.disabled = true;

  //Stop all video streams
  preview.srcObject.getVideoTracks().forEach(track => track.stop());
}

function handleStop() {
  const blob = new Blob(recordedChunks, { type: 'video/webm' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.style.display = 'none';
  a.href = url;
  a.download = 'recorded-video.webm';
  document.body.appendChild(a);
  a.click();
  setTimeout(() => {
    URL.revokeObjectURL(url);
    document.body.removeChild(a);
  }, 100);

  recordedChunks = []; // Reset array for the next recording
}

            

              
                Copy
              
            
          

ഈ ഉദാഹരണം ഒരു ബ്രൗസറിൽ നേരിട്ട് വീഡിയോ ക്യാപ്‌ചർ ചെയ്യുന്നതിൻ്റെയും പ്രദർശിപ്പിക്കുന്നതിൻ്റെയും റെക്കോർഡ് ചെയ്യുന്നതിൻ്റെയും ഡൗൺലോഡ് ചെയ്യുന്നതിൻ്റെയും പ്രധാന തത്വങ്ങൾ കാണിക്കുന്നു. പ്രവർത്തനം മെച്ചപ്പെടുത്തുന്നതിന് പിശകുകൾ കൈകാര്യം ചെയ്യൽ, വ്യത്യസ്ത കോഡെക് ഓപ്ഷനുകൾ, അല്ലെങ്കിൽ ഉപയോക്താവിന് ക്രമീകരിക്കാവുന്ന റെക്കോർഡിംഗ് നിലവാരം എന്നിവ ചേർക്കുന്നത് പരിഗണിക്കുക.

സുരക്ഷാ പരിഗണനകൾ

മീഡിയസ്ട്രീം റെക്കോർഡിംഗിൽ പ്രവർത്തിക്കുമ്പോൾ, സുരക്ഷാ പരിഗണനകളെക്കുറിച്ച് അറിഞ്ഞിരിക്കേണ്ടത് അത്യാവശ്യമാണ്:

• ഉപയോക്തൃ അനുമതികൾ: മൈക്രോഫോണോ ക്യാമറയോ ആക്‌സസ് ചെയ്യുന്നതിന് മുമ്പ് എല്ലായ്പ്പോഴും ഉപയോക്താവിൻ്റെ അനുമതി തേടുക. ഈ ഉപകരണങ്ങളിലേക്ക് നിങ്ങൾക്ക് എന്തിന് ആക്‌സസ് വേണമെന്ന് വ്യക്തമായി സൂചിപ്പിക്കുക.
• HTTPS: മീഡിയ സ്ട്രീം എൻക്രിപ്റ്റ് ചെയ്തിട്ടുണ്ടെന്നും ഒളിഞ്ഞുനോക്കുന്നതിൽ നിന്ന് സംരക്ഷിക്കപ്പെടുന്നുവെന്നും ഉറപ്പാക്കാൻ HTTPS ഉപയോഗിക്കുക. getUserMedia() എപിഐ-ക്ക് സാധാരണയായി ഒരു സുരക്ഷിത സന്ദർഭം (HTTPS) ആവശ്യമാണ്.
• ഡാറ്റ സംഭരണം: നിങ്ങൾ റെക്കോർഡ് ചെയ്ത ഡാറ്റ സംഭരിക്കുകയാണെങ്കിൽ, അത് സുരക്ഷിതമായി സംഭരിക്കുന്നുവെന്നും അനധികൃത ആക്‌സസ്സിൽ നിന്ന് പരിരക്ഷിക്കപ്പെടുന്നുവെന്നും ഉറപ്പാക്കുക. എൻക്രിപ്ഷനും ആക്സസ് കൺട്രോൾ സംവിധാനങ്ങളും ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക. നിങ്ങളുടെ ഉപയോക്താക്കൾക്കും അവരുടെ ലൊക്കേഷനും (ഉദാ. GDPR, CCPA) പ്രസക്തമായ ഡാറ്റാ സ്വകാര്യതാ നിയന്ത്രണങ്ങൾ പാലിക്കുക.
• സ്വകാര്യത: നിങ്ങൾ റെക്കോർഡ് ചെയ്ത ഡാറ്റ എങ്ങനെ ഉപയോഗിക്കുന്നു എന്നതിനെക്കുറിച്ച് സുതാര്യത പുലർത്തുക. ഉപയോക്താക്കൾക്ക് അവരുടെ ഡാറ്റയിൽ നിയന്ത്രണവും അത് ഇല്ലാതാക്കാനുള്ള കഴിവും നൽകുക.
• ക്ഷുദ്രകരമായ കോഡ്: ഉപയോക്താവ് സൃഷ്ടിച്ച ഉള്ളടക്കം കൈകാര്യം ചെയ്യുമ്പോൾ ശ്രദ്ധിക്കുക, കാരണം അതിൽ ക്ഷുദ്രകരമായ കോഡ് അടങ്ങിയിരിക്കാം. ക്രോസ്-സൈറ്റ് സ്ക്രിപ്റ്റിംഗ് (XSS) ആക്രമണങ്ങൾ തടയുന്നതിന് ഏതെങ്കിലും ഉപയോക്തൃ ഇൻപുട്ട് സാനിറ്റൈസ് ചെയ്യുക.

പ്രകടന ഒപ്റ്റിമൈസേഷൻ

മീഡിയസ്ട്രീം റെക്കോർഡിംഗ് ഉപയോഗിക്കുമ്പോൾ മികച്ച പ്രകടനം ഉറപ്പാക്കാൻ, ഇനിപ്പറയുന്നവ പരിഗണിക്കുക:

• MIME തരം തിരഞ്ഞെടുക്കൽ: ബ്രൗസർ പിന്തുണയ്ക്കുന്നതും നല്ല കംപ്രഷൻ നൽകുന്നതുമായ ഒരു MIME തരം തിരഞ്ഞെടുക്കുക.
• ടൈംസ്ലൈസ് ഇടവേള: ഡാറ്റ ലഭ്യതയും പ്രകടനവും സന്തുലിതമാക്കാൻ timeslice ഇടവേള ക്രമീകരിക്കുക. ഒരു ചെറിയ timeslice ഇടവേള കൂടുതൽ തവണ dataavailable ഇവൻ്റുകൾക്ക് കാരണമാകും, പക്ഷേ അത് ഓവർഹെഡ് വർദ്ധിപ്പിച്ചേക്കാം.
• ഡാറ്റ കൈകാര്യം ചെയ്യൽ: മെമ്മറി ലീക്കുകളും പ്രകടന തടസ്സങ്ങളും ഒഴിവാക്കാൻ റെക്കോർഡ് ചെയ്ത ഡാറ്റ കാര്യക്ഷമമായി കൈകാര്യം ചെയ്യുക. വലിയ അളവിലുള്ള ഡാറ്റ പ്രോസസ്സ് ചെയ്യുന്നതിന് ബഫറിംഗ്, സ്ട്രീമിംഗ് പോലുള്ള സാങ്കേതിക വിദ്യകൾ ഉപയോഗിക്കുക.
• യൂസർ ഇൻ്റർഫേസ്: റെക്കോർഡിംഗ് പ്രക്രിയയെക്കുറിച്ച് ഉപയോക്താവിന് വ്യക്തമായ ഫീഡ്‌ബാക്ക് നൽകുന്ന ഒരു യൂസർ ഇൻ്റർഫേസ് രൂപകൽപ്പന ചെയ്യുക. ഒരു റെക്കോർഡിംഗ് ഇൻഡിക്കേറ്റർ പ്രദർശിപ്പിക്കുകയും റെക്കോർഡിംഗ് താൽക്കാലികമായി നിർത്തുന്നതിനും പുനരാരംഭിക്കുന്നതിനും നിർത്തുന്നതിനുമുള്ള നിയന്ത്രണങ്ങൾ നൽകുക.

ഉപസംഹാരം

ഫ്രണ്ടെൻഡ് മീഡിയസ്ട്രീം റെക്കോർഡിംഗ്, വെബ് ഡെവലപ്പർമാരെ ബ്രൗസറിനുള്ളിൽ നേരിട്ട് മികച്ചതും ഇൻ്ററാക്ടീവുമായ മീഡിയ അനുഭവങ്ങൾ സൃഷ്ടിക്കാൻ പ്രാപ്തരാക്കുന്നു. MediaStream, MediaRecorder എപിഐ-കൾ മനസ്സിലാക്കുന്നതിലൂടെ, ഡെവലപ്പർമാർക്ക് ഓൺലൈൻ മീറ്റിംഗുകളും വീഡിയോ എഡിറ്റിംഗ് ടൂളുകളും മുതൽ ഇൻ്ററാക്ടീവ് ട്യൂട്ടോറിയലുകളും നിരീക്ഷണ സംവിധാനങ്ങളും വരെ വിപുലമായ ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കാൻ കഴിയും. സുരക്ഷയും പ്രകടനവും സംബന്ധിച്ച പരിഗണനകൾ ശ്രദ്ധിക്കുന്നതിലൂടെ, നിങ്ങളുടെ വെബ് ആപ്ലിക്കേഷനുകളുടെ പ്രവർത്തനക്ഷമതയും ഇടപഴകലും വർദ്ധിപ്പിക്കുന്ന ശക്തവും ഉപയോക്തൃ-സൗഹൃദവുമായ മീഡിയ റെക്കോർഡിംഗ് പരിഹാരങ്ങൾ നിങ്ങൾക്ക് സൃഷ്ടിക്കാൻ കഴിയും.